{% extends "dvaui/base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h4> Segment {{ object.segment_index }} in  <a href="/videos/{{ object.video.pk }}" style="font-weight:bold">{{ object.video.name }}</a></h4>
        </div>
    </div>
    </div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-6">
        <div class="box">
        <div class="box-header with-border text-center" >
            {% if previous_segment_index is not None %}<a class="btn btn-info" href="/segments/by_index/{{ video.pk }}/{{ previous_segment_index }}" style="float:left"><i class="fa fa-backward"></i> Previous segment</a>{% endif %}
            {% if next_segment_index %}<a class="btn btn-info" href="/segments/by_index/{{ video.pk }}/{{ next_segment_index }}" style="float:right"><i class="fa fa-forward"></i> Next segment</a>{% endif %}
            <h3 style="margin-top:5px">Segment {{ object.segment_index }}</h3>
        </div>
        <div class="box-body" style="text-align:center">
                <video class="video-js" controls="" preload="metadata" id="media" data-setup='{"fluid": true}'
                       style="width:90%;margin-left:auto;margin-right:auto">
                    <source src="{{url}}" type="video/mp4">
                </video>
        </div>
        </div>
        {% if frame_index_offsets %}
        <div class="box box-warning">
        <div class="box-header with-border">
        <h4>The video / dataset has max frame_index {{ max_frame_index }} > 1000 please select range </h4>
        </div>
        <div class="box-body">
            <table class="table dataTables">
            <thead>
            <tr>
                    <th class="text-center">frame index range</th>
                    <th class="text-center">view</th>
            </tr>
            </thead>
            <tbody>
            {% for offset in frame_index_offsets %}
                <tr>
                    <td class="text-center">{{ offset.0 }} to {{ offset.1 }}</td>
                    <td class="text-center"><a href=".?frame_index_offset={{ offset.0 }}">view range</a></td>
                </tr>
            {% endfor %}
            </tbody>
            </table>
        </div>
        </div>
        {%  endif %}
    </div>
    <div class="col-lg-6">
            <div class="box">
            <div class="box-body">
                <h3>Metadata</h3>
                <textarea style="width:100%;height:300px;">
                    {{ object.metadata }}
                </textarea>
            </div>
        </div>
    </div>
</div>
<div class="row">
<div class="col-lg-12">
            <div class="box">
            <div class="box-header with-border">
            <h3>List of frames/images & detection</h3>
            </div>
            <div class="box-body">
                {% if frame_first and frame_last %}
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 text-center" style="height:200px"><a href="/frames/{{ frame_first.pk }}"><img style="height:70%"  src="{{ MEDIA_URL }}{{ object.pk }}/frames/{{ frame_first.frame_index }}.jpg"><h4>Frame {{ frame_first.frame_index }}</h4></a></div>
                    <div class="col-lg-6 col-md-6 col-sm-6 text-center" style="height:200px"><a href="/frames/{{ frame_last.pk }}"><img style="height:70%" src="{{ MEDIA_URL }}{{ object.pk }}/frames/{{ frame_last.frame_index }}.jpg"><h4>Frame {{ frame_last.frame_index }}</h4></a></div>
                </div>
                {% endif %}
                <table class="table dataTables">
                <thead>
                <tr>
                        <th class="text-center">type</th>
                        <th class="text-center">file / annotation / object name</th>
                        <th class="text-center">confidence</th>
                        <th class="text-center">x</th>
                        <th class="text-center">y</th>
                        <th class="text-center">w</th>
                        <th class="text-center">h</th>
                        <th class="text-center">frame index</th>
                        <th class="text-center">view</th>
                </tr>
                </thead>
                <tbody>
                {% for f in frame_list %}
                    <tr>
                        <td>{% if object.dataset %} image {% else %} video frame {% endif %}</td>
                        <td class="text-left">{% if object.dataset %}  {{ f.name }} {% endif %}</td>
                        <td class="text-right"> 100.0 %</td>
                        <td class="text-right">{{ 0 }}</td>
                        <td class="text-right">{{ 0 }}</td>
                        <td class="text-right">{{ f.w }}</td>
                        <td class="text-right">{{ f.h }}</td>
                        <td class="text-right">{{ f.frame_index }} </td>
                        <td class="text-center"><a href="/frames/{{ f.pk }}">view</a></td>
                    </tr>
                {% endfor %}
                {% for d in region_list %}
                    <tr>
                        <td>Region</td>
                        <td class="text-left">{{ d.object_name }}</td>
                        <td class="text-right">{{ d.confidence|floatformat }}</td>
                        <td class="text-right">{{ d.x }}</td>
                        <td class="text-right">{{ d.y }}</td>
                        <td class="text-right">{{ d.w }}</td>
                        <td class="text-right">{{ d.h }}</td>
                        <td class="text-right">{{ d.frame_index }} </td>
                        <td class="text-center"><a href="/frames/by_index/{{ d.video_id }}/{{ d.frame_index }}">view</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                </div>
            </div>
    </div>
</div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
